<template>
<div class="gridContainer">
    <div class="order-detail-top">
        <div class="order-detail-header">
            <span class="f-l">业务单号：<i>{{Main.BBillNo}}</i></span>
            <!-- <em class="f-r">{{Main.State | PoState}}</em> -->
        </div>

        <ul class="order-detail-info">
            <li class="displayflex">
            <label>客户名称</label>
            <p class="flex1">{{Main.SendContact}}</p>
            </li>
            <li class="displayflex">
            <label>客户电话</label>
            <p class="flex1">{{Main.SendContactTel}}</p>
            </li>
            <li class="displayflex">
            <label>客户地址</label>
            <p class="flex1">{{Main.ArrivalAddress | removeSplash}}</p>
            </li>
            <li class="displayflex">
            <label>总件数</label>
            <p class="flex1"><em class="font-red">{{Main.OrdersPKGS}}</em>件</p>
            </li>
        </ul> 

    </div>  

    <div class="textList_con con_wldd_track mrT10">
        <ul class="track_dotRoute">
            <li  v-for="item in TracingList"> 
                <i></i>
                <div class="track_cont_detail">
                  <template v-if="item.ExcuteState =='T01'">
                    <p class="track_det_tit">{{item.Memo}}</p>
                  </template>
                  <template v-else>
                    <p class="track_det_tit">{{item.ExcuteState | PoState}}</p>
                  </template>
                  <p class="track_det_time">{{item.ExcuteDate | timeshort}}</p>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
          Main: {},
          TracingList: [],
        };
    },
    created(){
      this.getData();
    },
    methods:{
      getData: function() {
        let query = {
          Guid: this.$route.query.Guid,
          QueryType: "Tracing",
        };
        this.Ajax.post('GetOrderDetail', query).then((res) => {
          if (res.IsSuccess == true) {
            let main = {
              BBillNo : res.Data.BbMain.BBillNo,
              SendContact: res.Data.PoMain.SendContacts,
              SendContactTel: res.Data.PoMain.SendContactsTel,
              ArrivalAddress: `${res.Data.PoMain.ArrivalVenue}${res.Data.PoMain.ArrivalAddress}`,
              OrdersPKGS: res.Data.PoMain.OrdersPKGS,
              State: res.Data.PoMain.State,
            }
            this.Main = main;
            this.TracingList = res.Data.TracingList;
          } else {
            this.Toast({
              message: "服务器异常"
            });
          }
        });
      }
    }
};
</script>